<template>
  <div>
    <h1>事件组件</h1>
    <div>{{ name }}</div>
    <button v-on:click="changeName">修改名字，给名字后最佳+</button>
    <button @click="changeName">修改名字，给名字后最佳+</button>
    <div>{{ time }}秒</div>
    <button @click="countdown">倒计时开始</button>
    <button @click="countdownStop">停止倒计时</button>
  </div>
</template>


<script>

// let intervalId;

export default {
  name: "EventLoop",
  data() {
    return {
      name: "张三",
      time: 60,
      intervalId:null
    }
  },
  // 编写组件的方法
  methods: {
    // 用一个function函数，声明一个方法
    changeName() {
      console.log("我执行拉")
      // 数据驱动，只需要修改data上的数据就行
      // 可以通过this获取vue组件的实例
      // 通过vue组件的实例，可以获取到在data函数中返回的数据
      console.log(this.name)
      this.name = this.name + "+"
    },
    countdown() {
      if (this.intervalId != null) {
        return
      }
      // 这里要用箭头函数，保持this指向和countDown一致，指向vue实例
      this.intervalId = setInterval(() => {
        this.time--;
        if (this.time === 0) {
          clearInterval(this.intervalId);
          this.intervalId = null;
          this.time = 69
        }
      },1000);
    },
    countdownStop(){
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
}
</script>

<!--scoped作用是样式隔离-->
<style scoped>

</style>
